<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>引导页</title>
		<link rel="stylesheet" href="./css/base.css" />
		<link rel="stylesheet" href="./css/guide.css" />
	</head>

	<body>
		<div class="guide">
			<div class="wrap">
				<div class="guide-box buy">
					<a href="./login.html">
						<button class="guide-skip buy-skip">跳过</button>
					</a>
					<div class="guide-title">
						<p>订购方便</p>
						<p>只为您更省时便捷</p>
					</div>

					<div class="guide-circular">
						<div class="circular circular-buy">
							<img src="./images/guide-buy.png" alt="" class="buy-img" />
						</div>
					</div>
				</div>

				<div class="guide-box best">
					<a href="./login.html">
						<button class="guide-skip best-skip">跳过</button>
					</a>
					<div class="guide-title">
						<p>甄选优品</p>
						<p>品质商品推荐给您</p>
					</div>

					<div class="guide-circular">
						<div class="circular circular-best">
							<img src="./images/guide-best.png" alt="" class="best-img" />
						</div>
					</div>
				</div>

				<div class="guide-box low">
					<a href="./login.html">
						<button class="guide-skip low-skip">跳过</button>
					</a>
					<div class="guide-title">
						<p>低价保证</p>
						<p>最低价格推荐给您</p>
					</div>

					<div class="guide-circular">
						<div class="circular circular-low">
							<img src="./images/guide-low.png" alt="" class="low-img" />
						</div>
					</div>
				</div>

				<div class="guide-box shop">
					<div class="guide-title">
						<p>天眼购吧</p>
						<p>足不出户就可以感受实体商城</p>
					</div>
					<div class="guide-circular">
						<div class="circular circular-shop">
							<img src="./images/guide-shop.png" alt="" class="shop-img" />
						</div>
					</div>

					<a href="./login.html" class="guide-begin"><span class="begin">立即开始</span></a>
				</div>
			</div>
		</div>
		<div class="guide-choice">
			<div class="choice active"></div>
			<div class="choice"></div>
			<div class="choice"></div>
			<div class="choice"></div>
		</div>

		<script src="./js/rem.js"></script>
		<script src="./js/tools.js"></script>
		<script>

            touchmove('.wrap','.guide-choice')

			function touchmove(slide,active) {
				const wrap = document.querySelector(slide);
				const choice = document.querySelector(active);
				let start = 0,
					begin = 0,
					num = 0;

				wrap.addEventListener("touchstart", function (e) {
					begin = 0;
					start = 0;
					start = e.targetTouches[0].clientX;
				});
				wrap.addEventListener("touchmove", function (e) {
					wrap.style.transition = "none";
					begin = start - e.targetTouches[0].clientX;
					if (num === 0 && begin < 0) {
						begin = 0;
						num = 0;
					}
					if (num === wrap.children.length - 1 && begin > 0) {
						begin = 0;
						num = this.children.length - 1;
					}
					let a = wrap.children[0].offsetWidth * num;
					this.style.marginLeft = -begin + -a + "px";
				});
				wrap.addEventListener("touchend", function () {
					if (Math.abs(begin) > wrap.children[0].offsetWidth / 5) {
						if (begin > 0) {
							num++;
						} else if (begin < 0) {
							num--;
						}
					}
					autoClass(choice.children, "active", num);
					wrap.style.transition = ".3s";
					wrap.style.marginLeft = -num * 100 + "%";
				});
			}
		</script>
	</body>
</html>
